<script lang="ts" setup>
defineProps({
  frontmatter: {
    type: Object || String,
    default() {
      return {};
    },
  },
});
</script>

<template>
  <div class="markdown-body-title">
    <h2 class="page-title">{{ frontmatter.title }}</h2>
    <div class="info" v-if="frontmatter.author">
      <span class="author"
        >{{ frontmatter.author }} <span class="line">|</span></span
      >
      <span class="date" v-if="frontmatter.date"
        >{{ frontmatter.date }} <span class="line">|</span></span
      >
      <span class="tag" v-for="item in frontmatter.tags" :key="item">{{
        item
      }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.markdown-body-title {
  margin-bottom: 40px;
  border-bottom: 1px solid var(--theme-cross-line);
  padding-bottom: 24px;
  .page-title {
    font-size: 36px;
    line-height: 48px;
    margin: 0;
  }
  .info {
    color: var(--theme-text);
    font-size: 12px;
    margin-top: 20px;
    .line {
      margin: 0 16px;
    }
    .author {
      margin-left: 0;
    }
    .tag {
      display: inline-block;
      color: var(--theme-text);
      line-height: 20px;
      padding: 0 8px;
      border: 1px solid var(--theme-text);
      margin-right: 4px;
    }
  }
}
</style>
